<div class="row" style="margin-top: 1%">
	<div class="col-xs-12">
		<div class="box container" style="margin-left: 10%;margin-right: 10%;margin-top:0px;width: auto;border-top: 3px solid #00c0ef;padding-top: 1%;padding-bottom: 1%;">
			<div class="col-xs-12 col-md-4">
				<h3 class="boxtitle pull-left">中心管理</h3>
			</div>
			<div class="box-tools col-xs-12 col-md-8" style="padding-top: 10px;padding-bottom: 10px">
				<div class="input-group input-group-sm pull-right" style="width: 350px;">
					<input type="text" name="table_search" id="searchNameId"
						   class="form-control pull-right" placeholder="中心名称">

					<div class="input-group-btn" style="width: auto;">
						<button type="button" class="btn btn-default btn-search button button--aylen button--border-thin button--round-s" style="min-width: unset;margin: 0;">
							<i class="fa fa-search"></i>
						</button>
						<button type="button" class="btn btn-default btn-add button button--aylen button--border-thin button--round-s" style="min-width: unset;margin: 0;">添加</button>

					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding col-xs-12">
				<form>
					<table class="table table-hover">
						<thead>
						<tr>
							<th>序号</th>
							<th>中心名称</th>
							<th>城市</th>
							<th>地址</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>创建用户</th>
							<th>修改用户</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody id="tbodyId">
						</tbody>
					</table>
				</form>
			</div>

			<div id="pageId" class="box-footer clearfix col-xs-12">
			</div>
			<!-- /.box -->
		</div>
	</div>
</div>
<script type="text/javascript">
    $(function(){
        $("#pageId").load("doPageUI",function(){
            doGetObjects();
        });
        $(".input-group-btn")
            .on("click",".btn-search",doQueryObjects)
            .on("click",".btn-add",doLoadEditUI)

        $("#tbodyId")
            .on("click",".btn-delete",doDeleteObject)
            .on("click",".btn-update",doLoadEditUI)
    });

    function doLoadEditUI(){
        debugger
        var title;
        if($(this).hasClass('btn-add')){
            $("#mainContentId").removeData();
            title="添加中心";
            doLoadPageUI(title);
        }else{
            title="修改中心"
            var id=$(this).parents("tr").data("id");
            var params={"id":id};
            var url="cy/center/findObjectById";
            $.getJSON(url,params,function(result){
                if(result.state==1){
                    result.data.centerId=id;//在结果中动态追加id
                    $("#mainContentId").data("data",result.data);
                    doLoadPageUI(title);//异步加载页面
                }else{
                    alert(result.message);
                }
            });
        }
    }
    function doLoadPageUI(title){
        var url="center/center_edit"
        $("#mainContentId")
            .load(url,function(){
                $(".box-title").html(title);
            })
    }



    function doDeleteObject(){
        if(!confirm("确定删除该记录吗？")) return;
        //1.params
        var id=$(this).parents("tr").data("id");
        var params={"id":id};
        //2.url
        var url="cy/center/deleteObject"
        //3.ajax request
        $.post(url,params,function(result){
            if(result.state==1){
                alert(result.message);
                doGetObjects();
            }else{
                alert(result.message);
            }
        })

    }
    function doQueryObjects(){
        $("#pageId").data("current",1);
        doGetObjects();
    }
    function doGetObjects(){
        debugger
        //1.params
        //获取在Page.html中绑定的当前页码值
        var pageCurrent=$("#pageId").data("current");
        //假如没有值,设置初始值为1
        if(!pageCurrent)pageCurrent=1;
        //var params="pageCurrrent="+pageCurrent;
        var params={"current":pageCurrent};
        params.size = 6;
        //获取查询时用户输入的名字
        var name=$("#searchNameId").val();
        if(name)params.name=name;
        //2.url
        var url="cy/center/findAllObjects";
        //3.ajax request
        console.log(params);
        $.getJSON(url,params,function(result){
            doHandleResponseResult(result);
        });
    }
    function doHandleResponseResult(result){

        if(result.state==1){
            doSetTableBodyRows(result.data.records);
            doSetPagination(result.data);
        }else{
            doSetTableBodyErrors(result.message);
        }
    }
    function doSetTableBodyErrors(message){
        //获取body对象并清空
        var tBody=$("#tbodyId");
        tBody.empty();
        //创建tr对象
        var tr=$("<tr></tr>");
        //创建td对象
        //var len=$("table thead").find("tr").find("th").length;
        var len=$("table th").length;
        var td=$("<td></td>");
        td.prop("colspan",len);
        td.append(message);
        tr.append(td);
        //将tr追加到tbody
        tBody.append(tr);
    }
    function doSetTableBodyRows(records){

        //获取tbody对象,并清空
        var tBody=$("#tbodyId");
        tBody.empty();
        //2.迭代数据,并追加到tBody
        for(var i in records){
            //2.1构建tr对象
            var tr=$("<tr></tr>");
            tr.data("id",records[i].centerId);
            //2.2构建tds对象
            var tds=doCreateTds(records[i],i);
            //2.3将tds对象追加到tr中
            tr.append(tds);
            //2.4将tr追加到tbody中
            tBody.append(tr);
        }
    }
    function doCreateTds(row,i){
        var tds=
            "<td>"+(parseInt(i)+1)+"</td>"+
            "<td>"+row.name+"</td>"+
            "<td>"+row.city+"</td>"+
            "<td>"+row.address+"</td>"+
            "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
            "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
            "<td>"+row.createdUser+"</td>"+
            "<td>"+row.modifiedUser+"</td>"+
            "<td><a class='btn-delete'>删除</a>"+
            "&nbsp;<a class='btn-update'>修改</a></td>";
        return tds;
    }
</script>
